<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <FlightsFilter
            v-if="flightsData.options"
            :options="flightsData.options"
            :origin="cacheFlightsList"
            @setFlightsList="setFlightsList"
          />
        </div>
        <!-- 三元表达式,也可以用v-if
        ,才开始data里面是空的，需要等flightsData.flights数据到来-->
        <el-pagination
          layout="total,sizes,prev, pager, next,jumper"
          :total="flightsData.flights?flightsData.flights.length:0"
          @current-change="currentChange"
          :page-size="pageSize"
          :page-sizes="[2,5,10,20]"
          @size-change="sizeChange"
        ></el-pagination>
        <!-- 航班头部布局 -->
        <div>
          <flightsListHead />
        </div>

        <!-- 航班信息 -->
        <div>
          <!-- 这里的判断要注意flightsData.flights是异步,一定要判断有没有在判断长度 -->
          <div v-if="flightsData.flights&&flightsData.flights.length > 0">
            <FlightsItem :data="flight" v-for="(flight,index) in dataList" :key="index" />
          </div>
          <div v-else>暂无数据</div>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <flightsAside />
      </div>
    </el-row>
  </section>
</template>
<script>
import flightsListHead from "@/components/air/flightsListHead";
import FlightsItem from "@/components/air/FlightsItem";
import FlightsFilter from "@/components/air/FlightsFilter";
import flightsAside from "@/components/air/flightsAside";
export default {
  data() {
    return {
      flightsData: {},
      pageIndex: 1,
      pageSize: 10,
      cacheFlightsList: []
    };
  },
  computed: {
    dataList() {
      const beginIndex = (this.pageIndex - 1) * this.pageSize;
      const endIndex = beginIndex + this.pageSize;
      return this.flightsData.flights.slice(beginIndex, endIndex);
    }
  },
  mounted() {
    this.loadPage();
  },
  components: {
    flightsListHead,
    FlightsItem,
    FlightsFilter,
    flightsAside
  },
  //监听路由变化就行
  watch: {
    $route() {
      this.loadPage();
      //也可以用下面的方法重新加载,体验不好,建议不用
      //   location.reload();
    }
  },
  methods: {
    //封装
    loadPage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        console.log(res.data);
        this.flightsData = res.data;
        //备份机票数组数据,作为筛选,深拷贝好点,防止数据出错
        this.cacheFlightsList = [...res.data.flights];
        //   const beginIndex = (this.pageIndex - 1) * this.pageSize;
        //   const endIndex = beginIndex + this.pageSize;
        //   this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
      });
    },
    //current-change事件，翻页组件触发的函数,接收一个当前最新页码的参数
    currentChange(newPageIndex) {
      this.pageIndex = newPageIndex;
      //   const beginIndex = (this.pageIndex - 1) * this.pageSize;
      //   const endIndex = beginIndex + this.pageSize;
      //   this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
    },
    //size-change也是一个触发函数
    sizeChange(newPageSize) {
      this.pageSize = newPageSize;
      //   const beginIndex = (this.pageIndex - 1) * this.pageSize;
      //   const endIndex = beginIndex + this.pageSize;
      //   this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
    },
    setFlightsList(newFlightsList) {
      this.flightsData.flights = newFlightsList;
    }
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>